<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        img{
            width: 400px;
            height: 400px;
            display: block;
        }
    </style>
</head>

<body>
    <img data-src="../images/lazy1.jpg" src="https://www.bing.com/th/id/OGC.a9aa2af5b534589c7cde55033a06f0b2?pid=1.7&rurl=https%3a%2f%2fimg.zcool.cn%2fcommunity%2f01f4055864c2c3a8012060c8dc7eca.gif&ehk=UJtkkVVfDDml01gnHukVU49H5haX1W5nBa3%2b67nNOGM%3d" alt="">
    <img data-src="../images/lazy2.jpg" src="https://www.bing.com/th/id/OGC.a9aa2af5b534589c7cde55033a06f0b2?pid=1.7&rurl=https%3a%2f%2fimg.zcool.cn%2fcommunity%2f01f4055864c2c3a8012060c8dc7eca.gif&ehk=UJtkkVVfDDml01gnHukVU49H5haX1W5nBa3%2b67nNOGM%3d" alt="">
    <img data-src="../images/lazy3.jpg" src="https://www.bing.com/th/id/OGC.a9aa2af5b534589c7cde55033a06f0b2?pid=1.7&rurl=https%3a%2f%2fimg.zcool.cn%2fcommunity%2f01f4055864c2c3a8012060c8dc7eca.gif&ehk=UJtkkVVfDDml01gnHukVU49H5haX1W5nBa3%2b67nNOGM%3d" alt="">
    <img data-src="../images/lazy4.jpg" src="https://www.bing.com/th/id/OGC.a9aa2af5b534589c7cde55033a06f0b2?pid=1.7&rurl=https%3a%2f%2fimg.zcool.cn%2fcommunity%2f01f4055864c2c3a8012060c8dc7eca.gif&ehk=UJtkkVVfDDml01gnHukVU49H5haX1W5nBa3%2b67nNOGM%3d" alt="">
    <img data-src="../images/lazy5.jpg" src="https://www.bing.com/th/id/OGC.a9aa2af5b534589c7cde55033a06f0b2?pid=1.7&rurl=https%3a%2f%2fimg.zcool.cn%2fcommunity%2f01f4055864c2c3a8012060c8dc7eca.gif&ehk=UJtkkVVfDDml01gnHukVU49H5haX1W5nBa3%2b67nNOGM%3d" alt="">
    <img data-src="../images/lazy6.jpg" src="https://www.bing.com/th/id/OGC.a9aa2af5b534589c7cde55033a06f0b2?pid=1.7&rurl=https%3a%2f%2fimg.zcool.cn%2fcommunity%2f01f4055864c2c3a8012060c8dc7eca.gif&ehk=UJtkkVVfDDml01gnHukVU49H5haX1W5nBa3%2b67nNOGM%3d" alt="">
    <img data-src="../images/lazy7.jpg" src="https://www.bing.com/th/id/OGC.a9aa2af5b534589c7cde55033a06f0b2?pid=1.7&rurl=https%3a%2f%2fimg.zcool.cn%2fcommunity%2f01f4055864c2c3a8012060c8dc7eca.gif&ehk=UJtkkVVfDDml01gnHukVU49H5haX1W5nBa3%2b67nNOGM%3d" alt="">
    <img data-src="../images/lazy8.jpg" src="https://www.bing.com/th/id/OGC.a9aa2af5b534589c7cde55033a06f0b2?pid=1.7&rurl=https%3a%2f%2fimg.zcool.cn%2fcommunity%2f01f4055864c2c3a8012060c8dc7eca.gif&ehk=UJtkkVVfDDml01gnHukVU49H5haX1W5nBa3%2b67nNOGM%3d" alt="">
    <img data-src="../images/lazy9.jpg" src="https://www.bing.com/th/id/OGC.a9aa2af5b534589c7cde55033a06f0b2?pid=1.7&rurl=https%3a%2f%2fimg.zcool.cn%2fcommunity%2f01f4055864c2c3a8012060c8dc7eca.gif&ehk=UJtkkVVfDDml01gnHukVU49H5haX1W5nBa3%2b67nNOGM%3d" alt="">
    <img data-src="../images/lazy10.jpg" src="https://www.bing.com/th/id/OGC.a9aa2af5b534589c7cde55033a06f0b2?pid=1.7&rurl=https%3a%2f%2fimg.zcool.cn%2fcommunity%2f01f4055864c2c3a8012060c8dc7eca.gif&ehk=UJtkkVVfDDml01gnHukVU49H5haX1W5nBa3%2b67nNOGM%3d" alt="">
</body>
</html>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
    function lazyload(){
        $('img').each((i,item)=>{
       let top = $(item).offset().top
       let sTop = $(window).height() + $(document).scrollTop()
       if(top <= sTop){
          let src  = $(item).attr('data-src')
          $(item).attr('src',src)
       }
    })
    }
    let t 
    lazyload()
    $(window).scroll(function(){
        if(t) return 
        t = setTimeout(()=>{
            lazyload()
            t = null
        },1000)
        
    })
</script>